<template>
  <div id="app">
    <nav>
      <div class="more" @click='show=true'><i class="iconfont icon-ego-menu"></i></div>
      <div class="class" @click='show=true'>直播分类</div>
      <div class="TV" @click='tohome'>斗鱼TV</div>
    </nav>
    <transition name='sidebox'>
      <div class="sidebarbox" v-show="show" @click='show=false'>
        <transition name='sidebars'>
          <van-sidebar v-show="show" v-model="activeKey" class="sidebar">
            <van-sidebar-item v-for='item in Class' :key='item.cate1Id' :title="item.cate1Name" @click='toDetail(item.cate1Id)'/>
          </van-sidebar>
        </transition>
      </div>
    </transition>
    <router-view :key="$route.fullPath"></router-view>
     
  </div>
</template>
<script>
export default {
  data(){
    return {
      Class:[],
      activeKey:0,
      show:false
    }
  },
  created(){
    this.getClass()
  },
  methods:{
    getClass(){
      this.$http.get('/api/cate/list').then(res=>{
        this.Class=res.data.data.cate1Info
        // console.log(res)
      })
    },
    toDetail(id){
      this.$router.push({
        path:"/details",
        query:{
          id:id
        }
      })
      this.show=!this.show;
    },
    tohome(){
      this.$router.push({
        path:"/",
      })
      this.show=false;
    }
  }
}
</script>
<style >
/* app 组件是根组件 虽然不会往里面填充太多东西，但是是整个项目基础 */
html{
  font-size: 100px;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  height: 100vh;
  /* overflow: hidden; */
  color: #2c3e50;
}
.sidebarbox{
  position: fixed;
  left: 0;
  right: 0;
  top:0;
  bottom: 0;
  z-index: 3;
  background:rgba(40,40,40, .5);
}
.sidebar{
  width: 2.9rem;
  height: 100%;
  background:#282828;
}
.sidebar a{
  background:#282828;
  position: relative;
  color: #9a9a9a;
  width: 100%;
  height: .5rem;
  border-color: #282828 ;
  padding: 0 .15rem 0 .1rem;
  text-align: left;
  line-height: .5rem;
  font-size: .16rem;
}
.sidebar a:after{
  content: "〉";
  font-size: 14px;
  position: absolute;
  right: .15rem;
}
.sidebox-enter,.sidebox-leave-to{
opacity: 0;
}
.sidebox-enter-active,.sidebox-leave-active{
  transition: opacity .5s;
}
.sidebars-enter-active{
  animation: sideb .3s linear;
}
.sidebars-leave-active{
  animation: sideb .3s linear reverse;
}
@keyframes sideb{
  0%{
    transform: translateX(-750px)
  }
  100%{
    transform: translateX(0)
  }
}
nav{
display: flex;
flex: 1;
background: #282828;
height: .5rem;
font-size: .16rem;
color: #FFF;
justify-content: space-between;
}
nav div{
  height: .5rem;
  line-height: .5rem;
}
nav .more{
  flex: 1;
}
nav .more i{
  font-size: .18rem
}
nav .class{
  flex: 6;
  text-align: left;
}
nav .TV{
  flex: 2;
  color: #FF7700;
}
</style>
